{extend name="property/public/insidePageBase" /}
{block name="title"}充电桩订单列表{/block}
{block name="body"}
<div class="layuimini-container">
    <div class="layuimini-main">
        <form class="layui-form layui-form-pane" action="">
            <div class="layui-row">
                <div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
                    <div class="layui-form-item">
                        <label class="layui-form-label">按时间筛选</label>
                        <div class="layui-input-block">
                            <div class="layui-btn-group" id="timeToggle" style="float:left;">
                                <button type="button" data-val="" class="layui-btn layui-btn-normal" style="height: 38px;">全部</button>
                                <button type="button" data-val="today" class="layui-btn layui-btn-primary" style="height: 38px;">今天</button>
                                <button type="button" data-val="yesterday" class="layui-btn layui-btn-primary" style="height: 38px;">昨天</button>
                                <button type="button" data-val="lately7" class="layui-btn layui-btn-primary" style="height: 38px;">最近7天</button>
                                <button type="button" data-val="lately30" class="layui-btn layui-btn-primary" style="height: 38px;">最近30天</button>
                                <button type="button" data-val="month" class="layui-btn layui-btn-primary" style="height: 38px;">本月</button>
                                <button type="button" data-val="year" class="layui-btn layui-btn-primary" style="height: 38px;">本年</button>
                            </div>
                            <input type="text" id="time" placeholder="请选择时间" readonly autocomplete="off" class="layui-input" style="width: 300px;float:left">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">充电桩筛选</label>
                <div class="layui-input-inline">
                    <input type="text" name="piles_id" id="piles_id_case" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">关键字筛选</label>
                <div class="layui-input-inline">
                    <input type="text" name="keywords" autocomplete="off" class="layui-input" placeholder="关键字搜索" >
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">端口搜索</label>
                <div class="layui-input-inline">
                    <input type="text" name="port_no" autocomplete="off" class="layui-input" placeholder="端口号" >
                </div>
            </div>
            <div class="layui-inline">
                <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
            </div>
            <input type="hidden" name="time" value="" />
        </form>

        <script type="text/html" id="toolbar">
            <div class="layui-btn-container">
                {if $addAuth}
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
                {/if}
                {if $delAuth}
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
                {/if}
            </div>
        </script>
        <table class="layui-hide" id="pilesOrderList" lay-filter="pilesOrderList"></table>
        <script type="text/html" id="tableBar">
            <div class="layui-btn-group">
                {if $editAuth}<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="edit">编辑</button>{/if}
                {if $delAuth}<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>{/if}
                {if $detailAuth}<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="detail">详情</button>{/if}
                {if $refundAuth}{{# if(d.pay_status == 1) { }}<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="refund">退款</button>{{# } }}{/if}
            </div>
        </script>
        <script type="text/html" id="pay_status_tpl">
            {{# if(d.pay_status === 0) { }}<span class="layui-badge layui-bg-gray">未支付</span>{{# } }}
            {{# if(d.pay_status === 1) { }}<span class="layui-badge layui-bg-blue">己支付</span>{{# } }}
            {{# if(d.pay_status === 2) { }}<span class="layui-badge">已退款</span>{{# } }}
        </script>

        <script type="text/html" id="pay_type_tpl">
            {{# if(d.pay_type === 'balance') { }}
            <span class="layui-badge layui-bg-cyan">余额支付</span>
            {{# } else if(d.pay_type === 'wechat') { }}
            <span class="layui-badge layui-bg-green">微信支付</span>
            {{# } else if(d.pay_type === 'alipay') { }}
            <span class="layui-badge layui-bg-blue">支付宝</span>
            {{# } else { }}
            <span>--</span>
            {{# } }}
        </script>

        <script type="text/html" id="actual_power_tpl">
            {{# if(d.actual_power){ }}
            <span>{{ d.actual_power }}</span>
            {{# } else { }}
            <span>--</span>
            {{# } }}
        </script>

        <script type="text/html" id="status_tpl">
            {{# if(d.status === 0) { }}
            <span class="layui-badge layui-bg-black">未付款</span>
            {{# } else if(d.status === 1) { }}
            <span class="layui-badge layui-bg-cyan">付款未充电</span>
            {{# } else if(d.status === 2) { }}
            <span class="layui-badge layui-bg-blue">充电中</span>
            {{# } else if(d.status === 3) { }}
            <span class="layui-badge layui-bg-green">正常充电结束</span>
            {{# } else if(d.status === 4) { }}
            <span class="layui-badge layui-bg-orange">异常结束</span>
            {{# } else if(d.status === 5) { }}
            <span class="layui-badge layui-bg-orange">叠加结束</span>
            {{# } else if(d.status === -1) { }}
            <span class="layui-badge layui-bg-gray">已取消</span>
            {{# } else { }}
            <span>--</span>
            {{# } }}
        </script>
        
        <script type="text/html" id="end_remark_tpl">
            {{# if(d.end_remark){ }}
            <span>{{ d.end_remark }}</span>
            {{# } else { }}
                <span>--</span>
            {{# } }}
        </script>
        
        <script type="text/html" id="nickname_tpl">
            {{# if(d.nickname){ }}
            <span>{{ d.nickname }}</span>
            {{# } else { }}
                <span>--</span>
            {{# } }}
        </script>
        
        <script type="text/html" id="order_no_tpl">
            {{# if(d.order_no){ }}
            <span>{{ d.order_no }}</span>
            {{# } else { }}
                <span>--</span>
            {{# } }}
        </script>
    </div>
</div>
{/block}
{block name="js"}
{__block__}
<script>
    layui.use(['form', 'table', 'layCascader', 'laydate'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layCascader = layui.layCascader,
            laydate = layui.laydate;

        $('#timeToggle').on('click','button', function() {
            $(this).removeClass('layui-btn-primary').addClass('layui-btn-normal').siblings('button').removeClass('layui-btn-normal').addClass('layui-btn-primary')
            $('input[name="time"]').val($(this).data('val'));
            $('button[lay-filter="data-search-btn"]')[0].click()
            console.log($(this).data('val'));
        });
        laydate.render({
            elem: '#time'
            ,type: 'datetime'
            ,range: true
            ,done: (value, date, endDate) => {
                $('input[name="time"]').val(value);
                $('button[lay-filter="data-search-btn"]')[0].click()
            }
        });

        let piles_id_case = layCascader({
            elem: '#piles_id_case',
            clearable: true,
            placeholder:'请选择充电桩',
            value: {:request()->get('piles_id', 0)},
            options: {:json_encode($pilesData,JSON_UNESCAPED_UNICODE)}
        });
        piles_id_case.changeEvent((res, res2) => {
            $('button[lay-filter="data-search-btn"]').click()
        });

        var tableId = 'pilesOrderList';
        table.render({
            elem: '#'+tableId,
            id:tableId,
            url: '{:url("propertyPilesOrderList")}',
            toolbar: '#toolbar',
            totalRow: true,
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'order_no', width: 190, title: '订单编号', sort: true,templet: '#order_no_tpl', totalRowText: '合计'},
                {field: 'piles_name', minWidth: 120, title: '充电桩名称'},
                {field: 'port_no', width: 80, title: '端口', sort: true},
                {field: 'nickname', width: 120, title: '用户呢称',templet: '#nickname_tpl'},
                {field: 'pay_price', width: 108, title: '支付金额', sort: true, totalRow: true},
                {field: 'actual_amount', width: 108, title: '消费金额', sort: true, totalRow: true},
                {field: 'refund_price', width: 108,title: '退款金额', sort: true, totalRow: true},
                {field: 'actual_power', width: 120, title: '实际耗电/kW', totalRow: true,templet: '#actual_power_tpl'},
                {field: 'actual_time', width: 120, title: '充电时长/分', totalRow: true, templet: (d) => {
                    return Math.ceil(d.actual_time / 60);
                    }},
                {field: 'pay_status', width: 100, title: '支付状态',templet: '#pay_status_tpl'},
                {field: 'pay_type', width: 90, title: '支付方式',templet: '#pay_type_tpl'},
                {field: 'status', width: 105,title: '订单状态',templet: '#status_tpl'},
                {field: 'end_remark', minWidth: 120,title: '结束原因', templet: '#end_remark_tpl'},
                {field: 'add_time', width: 168,title: '创建时间', sort: true}
                {if $editAuth || $delAuth || $detailAuth || $refundAuth}
                    , {title: '操作', width: 198, toolbar: '#tableBar', fixed:'right'}
                {/if}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            height: 'full-100'
        });
        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) { table.reload(tableId, {page: { curr: 1  }, where: data.field}, 'data'); return false; });
        /**
         * toolbar监听事件
         */
        table.on('toolbar('+tableId+')', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                var url = '{:url("propertyPilesOrderAdd")}';
                var index = layer.open({title: '添加二维码', type: 2, shade: 0.2,maxmin:true, area: ['650px', '500px'], content: url, btnAlign: 'c', btn: ['确定', '取消'], yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index], submit = layero.find('iframe').contents().find("#submitBtn");
                        iframeWindow.layui.form.on('submit(submitBtn)', function (data) {
                            var field = data.field; //获取提交的字段
                            var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                            $.post(url, field, function (res) {
                                layer.close(loadAdd);
                                if (res.code === 0) {
                                    table.reload(tableId); //数据刷新
                                    layer.close(index); //关闭弹层
                                    layer.msg(res.msg, {icon: 6, offset: '15px'});
                                } else {
                                    layer.msg(res.msg, {icon: 5, offset: '15px'});
                                }
                            });
                        });
                        submit.trigger('click');
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (obj.event === 'delete') {  // 监听删除操作
                var checkStatus = table.checkStatus(obj.config.id),data = checkStatus.data;
                var data = checkStatus.data, id = [];
                for (elem in data) {
                    id.push(data[elem].id);
                }
                if (id.length === 0) {
                    return layer.msg('请选择要删除的数据');
                }
                var url = '{:url("propertyPilesOrderDel")}';
                layer.confirm('删除后不可恢复！  是否确认? ', {icon: 3}, function () {
                    var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                    $.post(url, {ids: id}, function (res) {
                        layer.close(loadAdd);
                        if (res.code === 0) {
                            table.reload(tableId); //数据刷新
                            layer.msg(res.msg, {icon: 6, offset: '15px'});
                        } else {
                            layer.msg(res.msg, {icon: 5, offset: '15px'});
                        }
                    });
                });
            }
        });

        //监听表格复选框选择
        table.on('checkbox('+tableId+')', function (obj) {
            console.log(obj)
        });
        table.on('tool('+tableId+')', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                var url = '{:url("propertyPilesOrderEdit")}?id='+data.id;
                var index = layer.open({
                    title: '编辑使用记录', type: 2,  shade: 0.2, maxmin:true, area: ['650px', '500px'],content: url, btnAlign: 'c', btn: ['确定', '取消'], yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index], submit = layero.find('iframe').contents().find("#submitBtn");
                        iframeWindow.layui.form.on('submit(submitBtn)', function (data) {
                            var field = data.field; //获取提交的字段
                            var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                            $.post(url, field, function (res) {
                                layer.close(loadAdd);
                                if (res.code === 0) {
                                    table.reload(tableId); //数据刷新
                                    layer.close(index); //关闭弹层
                                    layer.msg(res.msg, {icon: 6, offset: '15px'});
                                } else {
                                    layer.msg(res.msg, {icon: 5, offset: '15px'});
                                }
                            });
                        });
                        submit.trigger('click');
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'delete') {
                var url = '{:url("propertyPilesOrderDel")}';
                layer.confirm('删除后不可恢复！  是否确认? ', {icon: 3}, function () {
                    var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                    $.post(url, {ids: [data.id]}, function (res) {
                        layer.close(loadAdd);
                        if (res.code === 0) {
                            table.reload(tableId); //数据刷新
                            layer.msg(res.msg, {icon: 6, offset: '15px'});
                        } else {
                            layer.msg(res.msg, {icon: 5, offset: '15px'});
                        }
                    });
                });
            } else if (obj.event === 'detail') {
                var url = '{:url("propertyPilesOrderDetail")}?id='+data.id;
                var index = layer.open({  title: '订单详情',  type: 2,    shade: 0.2, maxmin:true,  area:['650px', '500px'],  content: url,  btnAlign: 'c',   btn: ['确定', '取消'] });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'refund') {
                var url = '{:url("propertyPilesOrderRefund")}?id='+data.id;
                var index = layer.open({  title: '退款',     type: 2,    shade: 0.2,   maxmin:true,   area: ['350px', '200px'],  content: url,  btnAlign: 'c',  btn: ['确定', '取消'],   yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index],
                        submit = layero.find('iframe').contents().find("#submitBtn");
                        iframeWindow.layui.form.on('submit(submitBtn)', function (data) {
                            var field = data.field; //获取提交的字段
                            var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                            $.post(url, field, function (res) {
                                layer.close(loadAdd);
                                if (res.code === 0) {
                                    table.reload(tableId); //数据刷新
                                    layer.close(index); //关闭弹层
                                    layer.msg(res.msg, {icon: 6, offset: '15px'});
                                } else {
                                    layer.msg(res.msg, {icon: 5, offset: '15px'});
                                }
                            });
                        });
                        submit.trigger('click');
                    }
                });
                return false;
            }
        });
    });
</script>
{/block}